<template>
  <div class="auto-maker-box" :class="['style'+styleIndex]" @dblclick="switchScroll">
    <div class="title">{{ title }}</div>
    <div class="contents-box">
      <div class="scroll-box" :class="{'stop':!isScroll}">
        <div :class="[item.type]" v-for="(item, index) in subtitles" :key="index">{{ item.content }}</div>
        <div class="h3 end" style="height:100%;text-align:center;font-size:36px;">点个关注吧</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'AutoMaker',
  components: {
  },
  data() {
    return {
      title: '',
      desc: '',
      subtitles: [],
      styleIndex:0,


      isScroll:false
    }
  },
  mounted() {
    setTimeout(()=>{
      this.isScroll = true;
    },2000)
    const {tempIndex,pageIndex} = this.$route.query;
    const path = `./book/${80782+parseInt((pageIndex??0))}`;
    this.styleIndex = tempIndex ?? 0;
    axios.get(path).then(res => {
      const { data } = res;
      let domparser = new DOMParser();
      let doc = domparser.parseFromString(data, 'text/html');
      let page = doc.querySelector('.bd-left .page');
      const title = page.querySelector('.title')?.innerText;
      const desc = page.querySelector('p')?.innerText;
      const subtitles = [];
      page.querySelectorAll('p').forEach((item, index) => {
        if (index > -1) {
          const strong = item.querySelector('strong');
          if(!!strong){
            subtitles.push({
              type: 'h3',
              content: item?.innerText.replace(/\u2003/g, "")
            });
          }else{
            subtitles.push({
              type: 'p',
              content: item?.innerText
            });
          }
          
        }
      });
      subtitles.pop();
      this.title = title.replace(/,/g, ' ').replace(/，/g, ' ');
      this.desc = desc;
      this.subtitles = subtitles;
    }).catch(err => {
      console.log(err)
    })
  },

  methods: {
    switchScroll(){
      this.isScroll = !this.isScroll;
    }
  }
}


</script>
<style scoped lang="less">
.auto-maker-box {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: hidden;
  background-position: left bottom;
  background-size: 100% auto;

  .title {
    padding: 10px;
    text-align: center;
    width: 80%;
    margin: 50px auto 10px;
    font-size: 30px;
    border-radius: 10px;
    font-weight: bold;
  }

  .contents-box {
    padding: 10px;
    width: 92%;
    margin: 1px auto 0;
    flex: 1;
    overflow: hidden;

    .scroll-box {
      position: relative;
      padding-bottom:50px;
      backface-visibility: hidden;
      animation: textScroll 30s  linear infinite;

      &.stop{
        animation-play-state: paused;
      }
      .h3 {
        padding: 20px 0;
        font-size: 24px;
        font-weight: bold;
      }

      .p {
        font-size: 20px;
        padding: 10px 0;
        line-height:30px;
      }
    }

    @keyframes textScroll {
      0% {
        top: 0;
      }

      100% {
        top: -300%;
      }
    }

  }

}

.style0 {
  background-color: #b8c8d5;

  .title {
    color: #ff5722;
  }
  .h3{
    color:#d34316;
  }
  .p{
    color:#000;
  }

}

.style1 {
  background-image: url('~@/assets/image/1.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
  }
}

.style2 {
  background-image: url('~@/assets/image/2.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
    text-shadow: 2px 3px 5px #fff;
  }
}

.style3 {
  background-image: url('~@/assets/image/3.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
    text-shadow: 2px 3px 5px #fff;
  }
}

.style4 {
  background-image: url('~@/assets/image/4.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
    text-shadow: 2px 3px 5px #fff;
  }
}

.style5 {
  background-image: url('~@/assets/image/5.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
    text-shadow: 2px 3px 5px #fff;
  }
}

.style6 {
  background-image: url('~@/assets/image/6.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color: #fff;
    text-shadow: 2px 3px 5px #152e3a;
  }
  .p{
    color: #fff;
    text-shadow: 2px 3px 5px #152e3a;
  }
}

.style7 {
  background-image: url('~@/assets/image/7.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
    text-shadow: 2px 3px 5px #fff;
  }
}

.style8 {
  background-image: url('~@/assets/image/8.jpg');
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
    background-color: rgba(0,0,0,.1);
  }
}

.style9 {
  background-image: url('~@/assets/image/9.jpg');
  background-position: left -31px;
  .title {
    color: #fff;
    text-shadow: 2px 3px 5px #000;
  }
  .contents-box{
      width: 80%;
    }
  .h3{
    color:#254d60;
  }
  .p{
    color:#152e3a;
    text-shadow: 2px 3px 5px #fff;
  }
}

.style10 {
  background-image: url('~@/assets/image/10.jpg');
  .title {
    color: rgb(241, 241, 241);
    text-shadow: 2px 3px 5px #000;
    margin-top: 30px !important;
  }
  .h3{
    color:#d34316;
  }
  .p{
    color:#000;
  }
}

</style>
